import React from 'react'
import PropTypes from 'prop-types'
import './index.styl'

const CustomNav = ({navs, onSwitchMenu, activeMenu}) => (
  <div className="nav-block">
    <ul>
      {
        navs.map(navItems => {
          return (
            <li key={navItems.id} data-a={activeMenu.activeMenuId} onClick={ () => onSwitchMenu(navItems.id, navItems.title) } className={ activeMenu.activeMenuId === navItems.id ? 'activity' : ''}> { navItems.title } </li>
          )
        })
      }
    </ul>
  </div>
)

CustomNav.propTypes = {
  navs: PropTypes.arrayOf(
    PropTypes.shape({
      activeMenu: PropTypes.object.isRequired,
    })
  ),
  onSwitchMenu: PropTypes.func.isRequired,
}

export default CustomNav